<style>
@media print {
  ._wz_freightCapesDetails {
    -webkit-print-color-adjust: exact;
    height: inherit !important;
    font-size: 12px !important;
  }
}
</style>
<template>
  <div ref="freightCapesDetails" class="_wz_freightCapesDetails" id="_wz_freightCapesDetails">
    <Form>
        <table cellpadding="0" cellspacing="0" border="0">
          <colgroup>
            <col width="13%">
            <col width="20%">
            <col width="13%">
            <col width="20%">
            <col width="13%">
            <col width="20%">
          </colgroup>
          <tbody>
          <tr>
            <td style="font-weight: 600;position:relative;" colspan="6">
                基本信息
              <Button type="primary" @click="printTest" class="no-print" style="position: absolute;right: 10px;top: 4px;">打印</Button>
            </td>
          </tr>
          <tr>
            <td colspan="2" rowspan="4">
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
                  <img :src="!!seeCarData.trailerImg?apiUrl.imgUrl+seeCarData.trailerImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
            </td>
            <td style="text-align: right;font-weight: 600;">车牌号</td>
            <td>{{!!seeCarData.trailerPlateNo ? seeCarData.trailerPlateNo : '--'}}</td>
            <td style="text-align: right;font-weight: 600;">车架号</td>
            <td>{{!!seeCarData.trailerFrameNo ? seeCarData.trailerFrameNo : '--'}}</td>
          </tr>
          <tr>
            <td style="text-align: right;font-weight: 600;">自编号</td>
            <td>{{!!seeCarData.customNo ? seeCarData.customNo : '--'}}</td>
            <td style="text-align: right;font-weight: 600;">营运证号</td>
            <td>{{!!seeCarData.trailerOperationCertificateNo ? seeCarData.trailerOperationCertificateNo : '--'}}</td>
          </tr>
          <tr>
            <td style="text-align: right;font-weight: 600;">联系人</td>
            <td>{{!!seeCarData.trailerContactsName ? seeCarData.trailerContactsName : '--'}}</td>
            <td style="text-align: right;font-weight: 600;">联系电话</td>
            <td>{{!!seeCarData.trailerContactsPhone ? seeCarData.trailerContactsPhone : '--'}}</td>
          </tr>
          <tr>
            <td style="text-align: right;font-weight: 600;">车主/业户</td>
            <td>{{!!seeCarData.trailerOwnerName ? seeCarData.trailerOwnerName : '--'}}</td>
            <td style="text-align: right;font-weight: 600;">车主电话</td>
            <td>{{!!seeCarData.trailerOwnerPhone ? seeCarData.trailerOwnerPhone : '--'}}</td>
          </tr>
          <tr>
            <td style="text-align: right;font-weight: 600;">初登日期</td>
            <td>{{!!seeCarData.trailerDrivingPermitRegisterDate ? seeCarData.trailerDrivingPermitRegisterDate : '--'}}</td>
            <td style="text-align: right;font-weight: 600;">发证日期</td>
            <td>{{!!seeCarData.trailerDrivingPermitIssueDate ? seeCarData.trailerDrivingPermitIssueDate : '--'}}</td>
            <td style="text-align: right;font-weight: 600;">到期日期</td>
            <td>{{!!seeCarData.trailerDrivingPermitExpireDate ? seeCarData.trailerDrivingPermitExpireDate : '--'}}</td>
          </tr>
          <tr>
            <td style="text-align: right;font-weight: 600;">运输企业</td>
            <td colspan="3">{{!!seeCarData.deptName ? seeCarData.deptName : '--'}}</td>
            <td style="text-align: right;font-weight: 600;">地理区域</td>
            <td>{{!!seeCarData.provinceName ? seeCarData.provinceName +' '+ seeCarData.cityName +' '+seeCarData.countyName : '--'}}</td>
          </tr>
          <tr>
            <td style="font-weight: 600;" colspan="6">详细信息</td>
          </tr>
          <tr>
            <td style="text-align: right;font-weight: 600;">挂车类型</td>
            <td>{{!!seeCarData.trailerType ? seeCarData.trailerType : '--'}}</td>
            <td style="text-align: right;font-weight: 600;">挂车品牌</td>
            <td>{{!!seeCarData.trailerBrand ? seeCarData.trailerBrand : '--'}}</td>
            <td style="text-align: right;font-weight: 600;">挂车型号</td>
            <td>{{!!seeCarData.trailerModel ? seeCarData.trailerModel : '--'}}</td>
          </tr>
          <tr>
            <td style="text-align: right;font-weight: 600;">核定总质量</td>
            <td>{{!!seeCarData.trailerWeight ? seeCarData.trailerWeight : '--'}}</td>
            <td style="text-align: right;font-weight: 600;">核定载质量</td>
            <td>{{!!seeCarData.trailerPermitWeight ? seeCarData.trailerPermitWeight : '--'}}</td>
            <td style="text-align: right;font-weight: 600;">容积/体积</td>
            <td>{{!!seeCarData.trailerTruckVolume ? seeCarData.trailerTruckVolume : '--'}}</td>
          </tr>
          <tr>
            <td style="text-align: right;font-weight: 600;">备注</td>
            <td colspan="5" style="min-height:50px;padding:5px 10px;">{{!!seeCarData.remark ? seeCarData.remark : '--'}}</td>
          </tr>
          <tr>
            <td style="font-weight: 600;" colspan="6">相关照片</td>
          </tr>
          <tr>
            <td style="text-align: right;font-weight: 600;">行驶证照片</td>
            <td colspan="2">
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
                  <img :src="!!seeCarData.trailerLicenseImg?apiUrl.imgUrl+seeCarData.trailerLicenseImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
            </td>
            <td style="text-align: right;font-weight: 600;">营运证照片</td>
            <td colspan="2">
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
                  <img :src="!!seeCarData.trailerOperationCertificateImg?apiUrl.imgUrl+seeCarData.trailerOperationCertificateImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
            </td>
          </tr>
          <tr>
            <td style="text-align: right;font-weight: 600;">挂车资料</td>
            <td colspan="5">
              <div style="min-height:50px;">
                <div style="width: 200px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="item,index in seeCarData.imgEntityList">
                  <div class="demo-upload-list">
                    <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
                      <img :src="!!item.imgUrl?item.imgUrl:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                    </viewer>
                  </div>
                  <div style="line-height: 30px;text-align: center;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;height: 30px;background: #f3f3f3;border-radius: 4px;">{{item.imgName}}</div>
                </div>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
<!--      </Card>-->
    </Form>
  </div>
</template>
<script>
export default {
  props: ['selectData'],//接收来自父组件的数据
  data() {
    return {
      seeCarData: {}, //车辆数据
    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    let that = this;

    //挂车修改详情
    that.axios.post(that.apiUrl.coreTrailerCoreTrailerInfo,{uuid: that.selectData.uuid}).then(res => {
      if (!!res) {
        that.spinShow = false;
        that.seeCarData = res.data.data;//表单
        let imgList = [];
        res.data.data.coreTrailerImgList.forEach((k, i) => {
          k.imgUrl = that.apiUrl.imgUrl + k.imgUrl
          imgList.push(k);
        })
        that.seeCarData.imgEntityList = imgList;//res.data.data.imgEntityList;//多图回显

      }
    }).catch(err => {
      console.log("失败", err)
    })

  },
  methods: {//执行的方法
    printTest() {
      this.$print(this.$refs.freightCapesDetails) // 使用
    }
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_freightCapesDetails {
  height: 100%;
  overflow: auto;

  table {
    table-layout:fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12px !important;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border: 1px solid #515a6e;
      padding: 0 10px;
      word-break: break-word;
    }
  }

  .demo-upload-list {
    margin: 5px auto;
    width: 200px;
    height: 140px;
    text-align: center;
    line-height: 140px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;

    img {
      min-height: 30%;
      max-height: 90%;
      min-width: 30%;
      max-width: 90%;
      //width: 100%;
      //height: 100%;
    }
  }


}

</style>
